<template>
	<view class="mainbgc" v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'审批详情',liner:false}">
		</header-top>
		<view class="margin_top mainpadding flexleft ffffff">
			<view class="imgs">
				<image :src="message.staff.avatar_text" mode=""></image>
			</view>
			<view class="right">
				<view class="xingm">{{message.staff.username}}</view>
				<view class="flexleft">
					<view class="shenpitext">审批状态：</view>
					<view class="shenpitext" v-show="message.status==10">待审批</view>
					<view class="shenpitext" v-if="message.status==20">通过</view>
					<view class="shenpitext" v-if="message.status==30">拒绝</view>
					<view class="shenpitext" v-if="message.status==40">已撤回</view>
					<view class="shenpitext" v-if="message.status==50">已作废</view>
				</view>

			</view>
		</view>
		<view class="margin_top mainpadding  ffffff">
			<view class="flexleft margin_top">
				<view class="shenpitexts">请假类型</view>
				<view class="xingm">{{message.qjtype.name}}</view>
			</view>
			<view class="flexleft margin_top">
				<view class="shenpitexts">请假时间</view>
				<view class="xingm">{{message.start_time_text}}至{{message.end_time_text}}</view>
			</view>
			<view class="flexleft margin_top">
				<view class="shenpitexts">请假时长</view>
				<view class="xingm">{{message.xc_time}}</view>
			</view>
			<view class="flexleft margin_top">
				<view class="shenpitexts">请假事由</view>
				<view class="xingm">{{message.notes}}</view>
			</view>
			<view class="flexleft">
				<view class="dakatp" v-for="(item,index) in message.images_text" :key="index" @click="lbtpriview(index,message.images_text)">
					<image :src="item" mode=""></image>
				</view>
			</view>
		</view>
		<view class="margin_top mainpadding  ffffff">
			<view class="flexbetween">
				<view class="left flexleft">
					<view class="tupian">
						<image :src="message.staff.avatar_text" mode=""></image>
					</view>
					<view>
						<view class="xingm">发起申请</view>
						<view class="xingming">{{message.staff.username}}</view>
					</view>
				</view>
				<!-- <view class="rttime">{{httpRequest.returnDate(message.createtime)}}</view> -->
			</view>
			<view class="xiantiao"></view>
			<view class="flexbetween">
				<view class="left flexleft">
					<view class="tupian">
						<image :src="message.applystaff.avatar_text" mode=""></image>
					</view>
					<view>
						<view class="xingm">处理人</view>
						<view class="shenhtg">{{message.applystaff.username}}</view>
					</view>
				</view>
				<!-- <view class="rttime">{{message.log_list[0].time_text}}</view> -->
			</view>
		</view>、
		<!-- 10=待审核,20=审核通过,30=审核拒绝,40=已撤回,50=已作废 -->
		<template>
			<view class="anniu margin_top mainpadding" v-show="message.status==10&&value==1">
				<view class="surebtn flexcenter" @click="chehui(40)">撤回</view>
			</view>
			<view class="anniu flexaround margin_top" v-show="message.status==10&&value==2">
				<view class="baisebtn" @click="chehui(30)">拒绝</view>
				<view class="lansebtn" @click="chehui(20)">同意</view>
			</view>
			<view class="anniu margin_top mainpadding" v-show="message.status==20&&value==2">
				<view class="surebtn flexcenter" @click="chehui(50)">作废</view>
			</view>
		</template>

	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid: "",
				value: "1", //1我的申请，2我的审批
				message: {},
				httpRequest,
				pageShow: false
			}
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.msg));
			this.listid = data.id
			this.value = data.value
			this.getdetail()
		},
		methods: {
			lbtpriview(index, arr) {
				var i = arr; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			getdetail() {
				httpRequest.request('/dhtapi/user/qjDetail', 'POST', {
					id: this.listid
				}, false, false, true).then(res => {
					this.message = res.data
					this.pageShow = true

				})
			},
			chehui(status) {
				httpRequest.request('/dhtapi/user/czQj', 'POST', {
					id: this.listid,
					status
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg);
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.baisebtn {
		width: 300rpx;
		height: 80rpx;
		background-color: #fff;
		border-radius: 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.lansebtn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 300rpx;
		height: 80rpx;
		background: linear-gradient(273deg, #0BBDCB 0%, #41D4E2 100%);
		border-radius: 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.shenhtg {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		margin-top: 8rpx;
	}

	//线条
	.xiantiao {
		width: 2rpx;
		height: 94rpx;
		background-color: #D9D9D9;
		margin-left: 34rpx;
	}

	.tupian {
		width: 68rpx;
		height: 68rpx;
		border-radius: 50%;
		margin-right: 20rpx;

		image {
			width: 100%;
			border-radius: 50%;
			height: 100%;
		}
	}

	.dakatp {
		width: 110rpx;
		height: 110rpx;
		margin-right: 30rpx;
		border-radius: 16rpx;
		margin-top: 20rpx;

		image {
			border-radius: 16rpx;
			width: 100%;
			height: 100%;
		}
	}

	.imgs {
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
		margin-right: 20rpx;

		image {
			width: 100%;
			border-radius: 50%;
			height: 100%;
		}
	}

	.xingm {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
	}

	.shenpitext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		margin-top: 16rpx;
	}

	.xingming {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		margin-top: 10rpx;
	}

	.shenpitexts {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		margin-right: 26rpx;
	}

	.rttime {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}
</style>